<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="提交线索 - 宜春市公安局袁州分局网络举报平台">
    <title>提交线索 - 宜春市公安局袁州分局网络举报平台</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css" rel="stylesheet">
    <!-- Dropzone.js CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css" rel="stylesheet">
    <!-- 内联样式 -->
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
        }

        .header-banner {
            background: url('/images/header_yuantai.png') center/cover no-repeat; /* 修正图片路径 */
            height: 180px;
            position: relative;
            border-radius: 0 0 20px 20px;
            overflow: hidden;
        }

        /* 移除之前的header-content, header-logo, header-text相关样式，因为图片自带文字和图标 */
        /* 如果需要添加遮罩层，可以保留header-overlay样式并调整透明度 */
        /* .header-overlay { /* 示例：如果需要遮罩层 */
        /*     position: absolute; */
        /*     top: 0; */
        /*     left: 0; */
        /*     right: 0; */
        /*     bottom: 0; */
        /*     background: rgba(0, 0, 0, 0.2); /* 轻微透明度 */
        /* } */

        .header-title { /* 暂时保留，如果未来需要叠加文字 */
            color: white;
            font-size: 2.5rem;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            display: none; /* 隐藏，因为图片自带文字 */
        }

        .header-subtitle { /* 暂时保留，如果未来需要叠加文字 */
            font-size: 1.5rem;
            margin-top: 0.5rem;
            display: none; /* 隐藏，因为图片自带文字 */
        }

        .form-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            overflow: hidden;
            padding: 2rem;
            margin: 2rem 0;
        }

        .section-header {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            color: white;
            padding: 1rem 1.5rem;
            margin: -2rem -2rem 2rem -2rem;
            text-align: center;
        }

        .info-section {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }

        .section-title {
            color: #1e3c72;
            font-weight: bold;
            margin-bottom: 1rem;
            border-bottom: 2px solid #1e3c72;
            padding-bottom: 0.5rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            border: none;
            padding: 0.75rem 2rem;
            font-weight: 500;
            border-radius: 25px;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(30, 60, 114, 0.4);
        }

        .btn-success {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            border: none;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #1e3c72;
            box-shadow: 0 0 0 0.2rem rgba(30, 60, 114, 0.25);
        }

        .upload-zone {
            border: 2px dashed #dee2e6;
            border-radius: 10px;
            padding: 3rem 2rem;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .upload-zone:hover,
        .upload-zone.dragover {
            border-color: #1e3c72;
            background-color: rgba(30, 60, 114, 0.05);
        }

        .sms-verification {
            background: #e3f2fd;
            border: 1px solid #2196f3;
            border-radius: 8px;
            padding: 1rem;
            margin: 1rem 0;
        }

        .countdown {
            color: #666;
            font-size: 0.9rem;
        }

        .form-check-label {
            font-weight: normal !important; /* 复选框标签文本正常粗细 */
            font-size: 1rem;
        }

        .dropzone {
            border: 2px dashed #0d47a1;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            background-color: #f0f4f8;
            transition: border-color 0.3s ease, background-color 0.3s ease;
        }

        .dropzone .dz-message {
            margin: 2em 0;
        }

        .dropzone .dz-preview .dz-image {
            border-radius: 5px;
            overflow: hidden;
            width: 120px;
            height: 120px;
        }

        .dropzone .dz-preview .dz-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .dropzone .dz-details {
            background-color: transparent;
        }

        .dropzone .dz-progress {
            background: #e9ecef;
        }

        .dropzone .dz-upload {
            background: #1e3c72;
        }

        .dropzone .dz-error-message {
            color: #dc3545;
        }

        .dropzone .dz-success-mark, .dropzone .dz-error-mark {
            display: none; /* Hide default check/cross marks */
        }

        /* Style for existing alert-warning, ensuring it doesn't conflict with Dropzone's default styling */
        .alert-warning {
            background-color: #fff3cd; /* Light yellow background */
            border-color: #ffecb5; /* Yellow border */
            color: #664d03; /* Dark yellow text */
            padding: 1rem 1rem;
            border-radius: 0.25rem;
        }

        .bg-deep-blue {
            background-color: #1a2b4a !important;
        }

        @media (max-width: 768px) {
            .header-banner {
                height: 150px;
            }

            .form-container {
                padding: 1rem;
            }

            .section-header {
                margin: -1rem -1rem 1rem -1rem;
            }
        }
    </style>
</head>
<body>
    <div class="header-banner">
        <!-- 图片已经包含文字和图标，无需额外HTML元素叠加 -->
            </div>

    <!-- 主要内容 -->
        <div class="container">
                    <div class="form-container">
            <div class="section-header">
                <h3><i class="fas fa-edit me-2"></i>举报信息填写</h3>
                                        </div>

            <form id="reportForm">
                <!-- 线索分类 -->
                <div class="info-section">
                    <h4 class="section-title"><i class="fas fa-th-list me-2"></i>线索分类</h4>
                    <div class="mb-3">
                        <label for="clueCategory" class="form-label">线索分类 <span class="text-danger">*</span></label>
                        <select class="form-select" id="clueCategory" name="clueCategory" required>
                            <option value="">==请选择==</option>
                            <option value="涉黄犯罪">涉黄犯罪</option>
                            <option value="涉赌犯罪">涉赌犯罪</option>
                            <option value="涉毒犯罪">涉毒犯罪</option>
                            <option value="涉烟花爆竹犯罪">涉烟花爆竹犯罪</option>
                            <option value="其他">其他</option>
                                                </select>
                                </div>
                            </div>

                <!-- 举报正文 -->
                <div class="info-section">
                    <h4 class="section-title"><i class="fas fa-file-alt me-2"></i>举报正文</h4>

                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                            <label for="incidentTime" class="form-label">举报案（事）件发生时间 <span class="text-danger">*</span></label>
                            <input type="datetime-local" class="form-control" id="incidentTime" name="incidentTime" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                            <label for="incidentLocation" class="form-label">举报案（事）件发生地点 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="incidentLocation" name="incidentLocation" required>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                        <label for="involvedPersons" class="form-label">举报案（事）件人员的基本情况</label>
                        <input type="text" class="form-control" id="involvedPersons" name="involvedPersons">
                                        </div>
                                        <div class="mb-3">
                        <label for="clueContent" class="form-label">举报详情 <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="clueContent" name="clueContent" rows="5" required></textarea>
                                </div>
                            </div>

                <!-- 上传附件 -->
                <div class="info-section">
                    <h4 class="section-title"><i class="fas fa-paperclip me-2"></i>证据材料收集（包含如照片，录音，录像等）</h4>
                    <div id="myDropzone" class="dropzone">
                        <div class="dz-message needsclick">
                                                    <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                            <p class="text-muted">拖拽文件到此区域上传 或 点击选择文件</p>
                                                </div>
                                            </div>
                    <div id="fileList" class="mt-3"></div>
                    <div class="alert alert-warning mt-3" role="alert">
                        <i class="fas fa-exclamation-triangle me-2"></i>温馨提示：最多可同时上传4个文件，每个文件只允许上传5M大小，附件支持jpg、png、gif、bmp、jpeg、tiff、svg、pdf、doc、docx、xls、xlsx、mp3、mp4、avi、mov等格式文件，禁止.exe、.bat等格式文件上传！
                                        </div>
                                        </div>

                <!-- 提交按钮 -->
                <div class="text-center mt-4">
                    <button type="button" class="btn btn-success btn-lg me-3" onclick="submitReport()">
                                        <i class="fas fa-paper-plane me-2"></i>
                        提交
                    </button>
                    <button type="button" class="btn btn-secondary btn-lg" onclick="resetForm()">
                        <i class="fas fa-redo me-2"></i>
                        重填
                                    </button>
                            </div>
                        </form>
                    </div>
                </div>

    <!-- 提交成功模态框 -->
    <div class="modal fade" id="successModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-deep-blue text-white">
                    <h5 class="modal-title">
                        <i class="fas fa-check-circle me-2"></i>
                        提交成功
                    </h5>
                </div>
                <div class="modal-body text-center py-4">
                    <i class="fas fa-check-circle text-success fa-3x mb-3"></i>
                    <h4>举报信息提交成功！</h4>
                    <p class="mb-3">您的举报编号是：<strong id="reportNo" class="text-primary"></strong></p>
                    <p class="text-muted">请保存好举报编号，用于查询处理进度</p>
                    <p class="text-muted">我们将在24小时内核实处理，感谢您的举报！</p>
                    <p class="text-muted" id="countdownMessage">4秒后自动跳转到主页...</p>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-primary" onclick="goToHome()">
                        <i class="fas fa-home me-2"></i>
                        返回首页
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-deep-blue text-light py-4 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <p class="mb-0">
                        &copy; 2025 宜春市公安局袁州分局 版权所有
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Dropzone.js JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>

    <script>
        Dropzone.autoDiscover = false; // Disable auto discovery for manual initialization

        // 从URL参数获取手机号
        function getPhoneFromURL() {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get('phone');
        }

        let myDropzone = new Dropzone("#myDropzone", {
            url: "http://localhost:3000/api/submit-clue", // Dummy URL, as we will manually append files to the main form
            paramName: "files", // Ensure this matches the backend's expected field name for files (e.g., upload.array('files'))
            maxFiles: 4,
            maxFilesize: 5, // MB
            acceptedFiles: ".jpg,.jpeg,.png,.gif,.bmp,.tiff,.svg,.pdf,.doc,.docx,.xls,.xlsx,.mp3,.mp4,.avi,.mov",
            addRemoveLinks: true,
            dictRemoveFile: "移除文件",
            dictCancelUpload: "取消上传",
            dictDefaultMessage: "<i class=\"fas fa-cloud-upload-alt fa-3x text-muted mb-3\"></i><p class=\"text-muted\">拖拽文件到此区域上传 或 点击选择文件</p>",
            autoProcessQueue: false, // Do not upload files automatically
            uploadMultiple: true, // Allow selecting and displaying multiple files
            parallelUploads: 4, // Number of files to upload in parallel (if autoProcessQueue were true)

            init: function() {
                // Custom initialization logic if needed
                // For example, if you need to set up event listeners or pre-populate files
            }
        });

        async function submitReport() {
            const form = document.getElementById('reportForm');
            const formData = new FormData(form);

            // 获取验证过的手机号
            const verifiedPhone = getPhoneFromURL();

            // 设置为匿名举报，但包含验证过的手机号
            formData.append('reportType', 'anonymous');
            if (verifiedPhone) {
                formData.append('reporterPhone', verifiedPhone);
                console.log('包含验证手机号:', verifiedPhone);
            } else {
                console.warn('未找到验证手机号');
            }

            // Validate required text fields first
            const clueContent = document.getElementById('clueContent').value;
            if (!clueContent.trim()) {
                alert('请填写举报详情！');
                return;
            }

            // Validate clueCategory
            const clueCategory = document.getElementById('clueCategory').value;
            if (!clueCategory) {
                alert('请选择线索分类！');
                return;
            }

            // Append files from Dropzone to the FormData
            myDropzone.getAcceptedFiles().forEach(function(file) {
                formData.append('files', file); // Append each file with the name 'files'
            });

            try {
                const response = await fetch('http://localhost:3000/api/submit-clue', {
                    method: 'POST',
                    body: formData // FormData will automatically set Content-Type: multipart/form-data
                });

                const result = await response.json();

                if (result.success) {
                    document.getElementById('reportNo').textContent = result.clueNo || result.reportNo || '暂无编号';
                    const successModal = new bootstrap.Modal(document.getElementById('successModal'));
                    successModal.show();
                    // 添加自动跳转逻辑
                    const countdownElement = document.getElementById('countdownMessage');
                    let countdown = 4;
                    countdownElement.textContent = `4秒后自动跳转到主页...`;
                    const interval = setInterval(() => {
                countdown--;
                        countdownElement.textContent = `${countdown}秒后自动跳转到主页...`;
                if (countdown <= 0) {
                            clearInterval(interval);
                            goToHome();
                }
            }, 1000);
                    resetForm(); // Reset the form after successful submission
                } else {
                    alert('提交失败: ' + (result.message || '未知错误'));
                }
            } catch (error) {
                console.error('Error submitting report:', error);
                alert('提交过程中发生错误，请稍后重试。');
            }
        }

        function resetForm() {
            document.getElementById('reportForm').reset();
            // Clear Dropzone files
            if (myDropzone) {
                myDropzone.removeAllFiles(true); // true to cancel any ongoing uploads
            }
        }

        function goToHome() {
            window.location.href = 'index.html';
        }

        // 页面加载时显示验证手机号（用于调试）
        window.addEventListener('DOMContentLoaded', function() {
            const phone = getPhoneFromURL();
            if (phone) {
                console.log('页面加载时获取到验证手机号:', phone);
                } else {
                console.warn('页面加载时未获取到验证手机号');
            }
        });
    </script>
</body>
</html>
